<template>
  <button @click="getData">获取数据</button>
  <div id="test4-univer"></div>
</template>
<script lang="ts" setup>
import {
  LocaleType,
  Tools,
  Univer,
  UniverInstanceType,
  FUniver,
} from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverUIPlugin } from "@univerjs/ui";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsFormulaUIPlugin } from "@univerjs/sheets-formula-ui";
import { UniverSheetsNumfmtPlugin } from "@univerjs/sheets-numfmt";
import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
import { UniverDataValidationPlugin } from '@univerjs/data-validation';
import { UniverSheetsDataValidationPlugin } from '@univerjs/sheets-data-validation';
import { UniverSheetsDataValidationUIPlugin } from '@univerjs/sheets-data-validation-ui';

import DesignZhCN from "@univerjs/design/locale/zh-CN";
import UIZhCN from "@univerjs/ui/locale/zh-CN";
import DocsUIZhCN from "@univerjs/docs-ui/locale/zh-CN";
import SheetsZhCN from "@univerjs/sheets/locale/zh-CN";
import SheetsUIZhCN from "@univerjs/sheets-ui/locale/zh-CN";
import SheetsFormulaUIZhCN from "@univerjs/sheets-formula-ui/locale/zh-CN";
import SheetsNumfmtUIZhCN from "@univerjs/sheets-numfmt-ui/locale/zh-CN";
import SheetsDataValidationZhCN from '@univerjs/sheets-data-validation-ui/locale/zh-CN';


// 这里的 Facade API 是可选的，你可以根据自己的需求来决定是否引入
import "@univerjs/engine-formula/facade";
import "@univerjs/ui/facade";
import "@univerjs/docs-ui/facade";
import "@univerjs/sheets/facade";
import "@univerjs/sheets-ui/facade";
import "@univerjs/sheets-formula/facade";
import "@univerjs/sheets-numfmt/facade";
import '@univerjs/sheets-data-validation/facade';


import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula-ui/lib/index.css";
import "@univerjs/sheets-numfmt-ui/lib/index.css";
import '@univerjs/sheets-data-validation-ui/lib/index.css';

import { onBeforeUnmount, onMounted } from "vue";
// import TestJson from "../count.json";
import TestJson from "../test.json";

// @ts-ignore
import _ from "loadsh";
let univerAPI:FUniver
onMounted(() => {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.ZH_CN,
    locales: {
      [LocaleType.ZH_CN]: Tools.deepMerge(
        {},
        DesignZhCN,
        UIZhCN,
        DocsUIZhCN,
        SheetsZhCN,
        SheetsUIZhCN,
        SheetsFormulaUIZhCN,
        SheetsNumfmtUIZhCN,
        SheetsDataValidationZhCN,
      ),
    },
  });
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
    univer.registerPlugin(UniverUIPlugin, {
    container: "test4-univer",
  });
  univer.registerPlugin(UniverDocsPlugin);
  univer.registerPlugin(UniverDocsUIPlugin);
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);
  univer.registerPlugin(UniverSheetsFormulaUIPlugin);
  univer.registerPlugin(UniverSheetsNumfmtPlugin);
  univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
  univer.registerPlugin(UniverDataValidationPlugin);
  univer.registerPlugin(UniverSheetsDataValidationPlugin);
  univer.registerPlugin(UniverSheetsDataValidationUIPlugin, {
    // 是否在下拉菜单中显示编辑按钮
    showEditOnDropdown: true
  });


  univer.createUnit(UniverInstanceType.UNIVER_SHEET, _.cloneDeep(TestJson));
  univerAPI = FUniver.newAPI(univer);
  onBeforeUnmount(()=>{
    // const activeWorkbook = univerAPI?.getActiveWorkbook()
    // const unitId = activeWorkbook && activeWorkbook.getId()
    // if(unitId && univerAPI.disposeUnit(unitId)){
    //   console.log("销毁了！")
    // }
    univer.dispose();
  })
});
function getData(){
  const savedData = univerAPI && univerAPI.getActiveWorkbook()?.save();
  console.log('savedData: ', savedData);
}
</script>
<style scoped>
#test4-univer {
  height: 80vh;
}
</style>
